<style lang="less">
@import '../../../styles/common.less';
</style>
<template>
    <Card style="height:800px">
        <Card>
            <header>
                <span> 客户姓名：</span>
                <Input v-model="replacePayment.custName" style="width: 150px" />
                <span style="width: 200px;margin-left: 20px;"> 代还款状态：</span>
                <Select v-model="replacePayment.auditStatus" class="v-select-wrapper" style="width:150px">
                    <Option v-for="item in repaymentStatusList" :value=" item.value" :key=" item.value">{{ item.label}}</Option>
                </Select>
                <span style="width: 200px;margin-left: 20px;"> 代还款类型：</span>
                <Select v-model="replacePayment.payType" class="v-select-wrapper" style="width:150px">
                    <Option v-for="item in repaymentTypeList" :value="item.value" :key="item.value">{{item.label}}</Option>
                </Select>
                <Button type="primary" @click="listQuery" style="margin-left: 20px;">查询</Button>
            </header>
        </Card>
        <Card>
            <Row type="flex" justify="center" align="middle" class="list-query">
                <Table border :columns="columns" :data="columnData" style="width: 100%;"></Table>
            </Row>

            <div style="margin-top: 36px;text-align: center;">
                <Page :total="replacePayment.total" :current="replacePayment.pageNum" :page-size="replacePayment.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
            </div>
        </Card>
    </Card>
</template>

<script>
export default {
  name: 'mutative-router',
  data () {
    return {
      replacePayment: {
        paymentActBeginDate: '',
        paymentActEndDate: '',
        custName: '',
        auditStatus: '',
        replacePaymentType: '',
        pageNum: 1,
        pageSize: 10,
        total: 0,
        payType: ''
      },
      repaymentStatusList: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '0',
          label: '已申请'
        },
        {
          value: '1',
          label: '已通过'
        },
        {
          value: '2',
          label: '已拒绝'
        }
      ],
      repaymentTypeList: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '1',
          label: '代还款'
        },
        {
          value: '2',
          label: '提前结清'
        }
      ],
      columns: [
        {
          type: 'index',
          title: '序号',
          width: 60
        },
        {
          title: '客户姓名',
          key: 'custName',
          align: 'center'
        },
        {
          title: '身份证',
          key: 'custCardNo',
          align: 'center'
        },
        {
          title: '还款期数',
          key: 'currTenor',
          align: 'center'
        },
        {
          title: '资金方',
          key: 'fundName',
          align: 'center'
        },
        {
          title: '总欠款金额',
          key: 'amount',
          align: 'center'
        },
        {
          title: '实还金额',
          key: 'amountAct',
          align: 'center'
        },
        {
          title: '交易流水号',
          key: 'tradeSerialNumber',
          align: 'center'
        },
        {
          title: '还款方式',
          key: 'repaymentWays',
          align: 'center',
          render: (h, params) => {
            if (params.row.repaymentWays === '1') { // 对公转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '对公转账')
            }
            if (params.row.repaymentWays === '2') { // 支付宝转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '对公转账')
            }
          }
        },
        {
          title: '状态',
          key: 'contractStatus',
          align: 'center',
          // 0正常 1逾期 2结清 3提前结清 10核销
          render: (h, params) => {
            if (params.row.contractStatus === '0') { // 对公转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '正常')
            }
            if (params.row.contractStatus === '1') { // 支付宝转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '逾期')
            }
            if (params.row.contractStatus === '3') { // 支付宝转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '提前结清')
            }
            if (params.row.contractStatus === '10') { // 支付宝转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '核销')
            }
          }

        },
        {
          title: '备注',
          key: 'remarks',
          align: 'center'
        }
      ],
      columnData: []
    }
  },
  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },
  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.replacePayment.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.replacePayment.pageSize = pageLength
      vm.listQuery()
    },

    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/replacePayment/service/queryReplacePayment', this.replacePayment).then(re => {
        var data = re.data
        vm.columnData = data.data.list
        vm.replacePayment.total = data.data.total
      }).catch(er => {

      })
    }

  }
}
</script>
<style>
.v-bottom-page-div {
  margin-top: 120px;
  text-align: center;
}

.v-left-div {
  float: left;
  margin-left: 10px;
}
.v-i-icon {
  float: left;
  margin-left: 10px;
}
.v-bottom-page-div {
  float: left;
  margin-left: 20px;
  margin-top: -5px;
}
</style>
